<template>
  <!-- 不是对象不显示 -->
  <div v-show="isJsonColumn && parseSuccess" class="op-group comp-op-filter">
    <div class="op-title">对象解析</div>
    <div class="option-item">
      <div class="title-row">
        <span class="label">
          <span
            class="view-icon"
            title="预览"
            @mouseleave="onMouseLeave()"
            @mouseenter="onMouseEnter($event, selectionJsonParse)"
          >
            <img src="~@/assets/dataset/preview.png" alt="preview" />
          </span>
          解析所选键"{{ parseKeys }}"成新列
        </span>
        <a-button class="op-btn" type="primary" size="small" @click="confirm"
          >确定</a-button
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts">
/**
 * 刷选json 智能推荐 --> 数据清洗 --> 对象解析推荐
 */
import DataStore, {
  OptionPreViewAction,
  SelectionInfo,
} from '@/store/modules/dataview'
import { Component, Vue, Watch } from 'vue-property-decorator'

@Component({
  components: {},
})
export default class SelectionJsonParse extends Vue {
  // 当刷选的列是对象时显示
  public get isJsonColumn() {
    return this.selectionInfo?.columnDesc === 'json'
  }

  // 当前刷选的单元格的值信息 info
  public get selectionInfo(): SelectionInfo | null {
    return DataStore.tableSelectionInfo
  }

  /** 操作option */
  selectionJsonParse: string = OptionPreViewAction.selectionJsonParse

  /** 绑定值 */
  value: string = `${OptionPreViewAction.selectionJsonParse}`

  // 要解析的 key
  public parseKeys: string | null = null
  private parseSuccess: boolean = false

  // 刷选数据变化
  @Watch('selectionInfo', { deep: true, immediate: true })
  public selectionInfoWatch(info: any) {
    this.parseJson(info)
  }

  /**
   * 解析 Json 对象
   */
  public parseJson(info: any) {
    this.parseSuccess = false // 解析结果初始化
    this.parseKeys = null
    DataStore.setCurrentSelectionJsonKey(this.parseKeys)
    if (info?.columnDesc !== 'json') {
      return
    }
    const { selection, fullValue } = info
    const fullJson = JSON.parse(fullValue)
    // 为对象
    if (Object.prototype.toString.call(fullJson) === '[object Object]') {
      let dealWordChoice: string = selection.trim() // 去除首尾空格和引号
      if (dealWordChoice.startsWith('"')) {
        dealWordChoice = dealWordChoice.slice(1)
      }
      if (dealWordChoice.endsWith('"')) {
        dealWordChoice = dealWordChoice.slice(0, -1)
      }
      Object.keys(fullJson).forEach((key: any) => {
        if (
          String(fullJson[key]) === dealWordChoice ||
          key === dealWordChoice
        ) {
          this.parseKeys = key
          // 解析出来的 key 存储 store (供 dataPreview 预览使用生成预览表列)
          DataStore.setCurrentSelectionJsonKey(this.parseKeys)
          this.parseSuccess = true
        }
      })
    }
  }

  /** 是否为多刷选模式 */
  get isMutiple() {
    return DataStore.tableSelectionInfo?.isMutiple
  }

  /**
   * 确定对象解析
   */
  confirm() {
    this.doOption()
  }

  /** 执行操作 */
  doOption() {
    if (
      this.value === `${OptionPreViewAction.selectionJsonParse}` &&
      DataStore.tableSelectionInfo
    ) {
      this.$emit('actiondone', {
        action: this.value,
        col: this.selectionInfo?.columnName,
        desc: '单元格对象刷选 > 对象解析',
        data: {
          key: [this.parseKeys],
        },
      })
    }
  }

  /** 鼠标移入 */
  onMouseEnter(event: any, action: string) {
    const target = event.target as HTMLElement
    if (target) {
      DataStore.setPreviewAction(action)
      DataStore.setHoverYPos(target.getBoundingClientRect().top - 16)
    }
  }

  /** 鼠标移出 */
  onMouseLeave() {
    DataStore.setHoverYPos(-1)
  }
}
</script>
<style lang="less" scoped>
@import url('../op.less');
</style>
